<template>
    <div id="box" v-if="orderInfo!=''">
        <div class="header">
            <div class="headerCon">
                <div>
                    <i @click="$router.back(-1)" class="el-icon-arrow-left"></i>
                </div>
                <h4>
                    订单详情
                </h4>
                <div>
                    <i class="el-icon-more"></i>
                </div>
            </div>
        </div>
        <div class="orderStatus">
            <div v-if="orderInfo.isOver==1">
                <el-card class="box-card">
                    <div slot="header">
                        <p>订单已完成,感谢您对本应用的支持</p>
                    </div>
                    <el-button v-if="orderInfo.isEvaluate==null||orderInfo.isEvaluate==''" @click.stop="toEvaluate(orderInfo.orderId)" type="primary">去评价</el-button>
                </el-card>
            </div>
            <div v-else>
                <el-card class="box-card" v-if="orderInfo.isPay==1">
                    <div slot="header">
                        <p>订单已付款</p>
                    </div>
                    <el-button type="primary">去完成</el-button>
                </el-card>
                <el-card class="box-card" v-else>
                    <div slot="header">
                        <p>订单未付款</p>
                    </div>
                    <el-button type="primary">去付款</el-button>
                </el-card>
            </div>
        </div>
        <div class="orderDetail">
            <div>
                <el-card class="box-card">
                    <div slot="header" class="clearfix" style="display: flex;align-items: center">
                        <el-image style="width: 40px;" :src="$url1+orderInfo.shopImg"></el-image>
                        <h3 style="margin-left: 10px">{{orderInfo.shopName}}</h3>
                    </div>
                    <div style="display: flex;flex-direction: row;align-items: center;padding-bottom: 5px;margin-bottom: 5px"
                         v-for="(item,i) in orderInfo.orderDetailList" :key="i" class="text item">
                        <el-image :fit="'scale-down'" style="width: 50px;" :src="$url1+item.goodsImg"></el-image>
                        <div style="justify-content: space-between;display: flex;padding-left: 10px;flex: 1">
                            <p>{{item.goodsName}}</p>
                            <span>￥{{item.goodsPrice}}</span>
                        </div>
                    </div>
                    <div class="text item" style="border-bottom:1px solid #EBEEF5;padding-bottom: 10px">
                        <div style="justify-content: space-between;display: flex;flex: 1;">
                            <h3>配送费</h3>
                            <span>￥{{orderInfo.shippingFee}}</span>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: flex-end;margin-top: 10px;">
                        <p style="align-self: flex-end;padding-right: 5px">合计￥</p>
                        <h3 style="font-size: 25px">{{orderInfo.orderAmount}}</h3>
                    </div>
                </el-card>
            </div>
        </div>
        <div class="deliveryInfo">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <h3>配送信息</h3>
                </div>
                <div class="text item">
                    <div class="deliveryInfoItem">
                        <p>联系人</p>
                        <span>{{orderInfo.receivingName}}</span>
                    </div>
                    <div class="deliveryInfoItem">
                        <p>联系电话</p>
                        <span>{{orderInfo.receivingTelephone}}</span>
                    </div>
                    <div class="deliveryInfoItem">
                        <p>配送地址</p>
                        <span>{{orderInfo.receivingAddress}}</span>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="orderInfo">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <h3>订单信息</h3>
                </div>
                <div class="text item">
                    <div class="deliveryInfoItem">
                        <p>订单号码</p>
                        <span>{{orderInfo.orderId}}</span>
                    </div>
                    <div class="deliveryInfoItem">
                        <p>下单时间</p>
                        <span>{{orderInfo.createTime}}</span>
                    </div>
                    <div class="deliveryInfoItem" v-if="orderInfo.payTime!=null">
                        <p>支付时间</p>
                        <span>{{orderInfo.payTime}}</span>
                    </div>
                    <div class="deliveryInfoItem" v-if="orderInfo.overTime!=null">
                        <p>订单完成时间</p>
                        <span>{{orderInfo.overTime}}</span>
                    </div>
                    <div class="deliveryInfoItem" v-if="orderInfo.evaluateTime!=null">
                        <p>订单评价时间</p>
                        <span>{{orderInfo.evaluateTime}}</span>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "orderDetail",
        mounted ()
        {
            this.$router.afterEach((to, from, next) => {
                window.scrollTo(0, 0)
            })
        },
        data(){
          return {
              orderInfo:''
          }
        },
        created(){
          this.getOrder()
        },
        methods:{
            toEvaluate(id) {
                this.$router.push('/order/evaluate/' + id)
            },
            getOrder(){
                let params={
                    orderId:this.$route.query.orderId
                }
                this.$axios({
                    method:'get',params,
                    url:'order/getOrderById'
                }).then(r=>{
                    this.orderInfo = r.data
                }).catch(err=>{
                    this.$message.error('网络异常')
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    #box {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding-bottom: 50px;
    }

    .header {
        display: flex;
        justify-content: center;
        height: 80px;
        background-color: #FFCA0D;
        width: 100%;
    }

    .headerCon {
        width: 95%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        i {
            font-size: 30px;
        }
    }

    .orderDetail, .orderStatus {
        padding-top: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        >div{
            width: 100%;
            display: flex;
            justify-content: center;
        }
    }

    .el-card {
        width: 95%;
        border-radius: 10px;

        /deep/ .el-card__body {
            padding: 10px 20px;
        }
    }

    .deliveryInfo, .orderInfo {
        width: 100%;
        display: flex;
        justify-content: center;
        padding-top: 10px;
    }

    .deliveryInfoItem {
        justify-content: space-between;
        display: flex;
        flex: 1;
        margin: 10px 0;
    }


</style>